<script setup lang="ts">
import * as echarts from 'echarts'

import { nextTick, onMounted } from 'vue'

const data = {
    "1": {
        "tid": 1,
        "count": 2,
        "name": "动画"
    },
    "3": {
        "tid": 3,
        "count": 14,
        "name": "音乐"
    },
    "4": {
        "tid": 4,
        "count": 8,
        "name": "游戏"
    },
    "5": {
        "tid": 5,
        "count": 12,
        "name": "娱乐"
    },
    "36": {
        "tid": 36,
        "count": 304,
        "name": "知识"
    },
    "155": {
        "tid": 155,
        "count": 7,
        "name": "时尚"
    },
    "160": {
        "tid": 160,
        "count": 650,
        "name": "生活"
    },
    "167": {
        "tid": 167,
        "count": 2,
        "name": "国创"
    },
    "177": {
        "tid": 177,
        "count": 61,
        "name": "纪录片"
    },
    "181": {
        "tid": 181,
        "count": 13,
        "name": "影视"
    },
    "188": {
        "tid": 188,
        "count": 73,
        "name": "科技"
    },
    "202": {
        "tid": 202,
        "count": 5340,
        "name": "资讯"
    },
    "211": {
        "tid": 211,
        "count": 29,
        "name": "美食"
    },
    "217": {
        "tid": 217,
        "count": 132,
        "name": "动物圈"
    },
    "223": {
        "tid": 223,
        "count": 14,
        "name": "汽车"
    },
    "234": {
        "tid": 234,
        "count": 86,
        "name": "运动"
    }
} as any


var arrData = [] as any

for (const index in data) {
    arrData.push({ value: index, name: data[index].name })
}
type EChartsOption = echarts.EChartsOption
var option: EChartsOption

option = {
    grid: {
        containLabel: true,
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    legend: {
        left: 'center',
        type: 'scroll',
        bottom: 0,
        textStyle: {
            color: 'rgba(255, 255, 255, 0.8)'
        }

    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            type: 'pie',
            radius: ['30%', '50%'],
            label: {
                show: true,
                formatter(param) {
                    // correct the percentage
                    return param.name + ' (' + param.percent + '%)'
                },
                fontSize: 12,
                fontWeight: 400,
                color: 'rgba(255, 255, 255, 0.8)'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 14
                }
            },
            labelLine: {
                show: true
            },
            data: arrData
        }
    ]
}

const init = () => {
    var chartDom = document.getElementById('simple-pip')
    var myChart = echarts.init(chartDom)


    option && myChart.setOption(option)
    window.onresize = function () {
        myChart.resize()
    }
}

onMounted(() => {
    nextTick(() => {
        init()
    })
})
</script>
<template>
    <div id="simple-pip" style="width: 9.4667rem;height:5.6rem; margin: 0 auto;">

    </div>
</template>
<style></style>